<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我为音乐狂</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet/less" href="./css/common.less">
  <link rel="stylesheet/less" href="./css/home.less">
</head>

<body>
  <header class="header_common">
    <div class="bg_nav">
      <nav>
        <a href=""><img src="./images/home/three_hr.png" alt=""></a>
        <ul>
          <li><a href="">我的</a></li>
          <li><a href="">推荐</a></li>
          <li><a href="">发现</a></li>
        </ul>
        <a href=""><img src="./images/home/serach_icon.png" alt=""></a>
      </nav>
    </div>
    <ul class="nav_menu">
      <li><a href="./index.html">首页</a></li>
      <li><a href="./html/omnibus.html">精选集</a></li>
      <li><a href="./html/rank.html">排行榜</a></li>
      <li><a href="">电台</a></li>
      <li><a href="./html/refer_mv.html">MV</a></li>
    </ul>
  </header>
  <div class="banner">
    <img src="./images/home/banner.jpg" alt="">
    <ul class="circle_small">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="menu_icon">
    <ul>
      <li>
        <img src="./images/home/heart_icon.png" alt="">
        <h3>猜你喜欢</h3>
      </li>
      <li>
        <img src="./images/home/fix_icon.png" alt="">
        <h3>最新最热</h3>
      </li>
      <li>
        <img src="./images/home/car_icon.png" alt="">
        <h3>晚高峰</h3>
      </li>
      <li>
        <img src="./images/home/music_icon.png" alt="">
        <h3>听歌识曲</h3>
      </li>
    </ul>
  </div>
  <div class="home_music">
    <div class="title">
      <h2>为你推荐</h2>
      <a href="#">查看更多<img src="./images/home/more_icon.png" alt=""></a>
    </div>
    <ul>
      <li>
        <a href="">
          <img src="./images/home/tuijian1.png" alt="">
          <h3>每日推荐30首</h3>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/tuijian2.png" alt="">
          <h3>运动！节奏感！</h3>
          <h4>caplico</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/tuijian3.png" alt="">
          <h3>舒缓静心的纯音好碟 - 留声机第6期</h3>
          <h4>虾米留声机</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/tuijian4.png" alt="">
          <h3>2016第58届格莱美获奖和提名名单</h3>
          <h4>音乐跳电台</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/tuijian5.png" alt="">
          <h3>前奏党都会喜欢</h3>
          <h4>icekeigo</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/tuijian6.png" alt="">
          <h3>情迷大提琴，涌动心弦的深沉</h3>
          <h4>叁玖素材</h4>
        </a>
      </li>

    </ul>
  </div>
  <div class="home_music three_menu">
    <ul>
      <li>
        <a href="">
          <img src="./images/home/menu_1.png" alt="">
          <h3>好听到抖腿，黄老板新歌REMIX</h3>
          <span>新歌</span>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_2.png" alt="">
          <h3>回味无穷的民谣新作，强推</h3>
          <span>新碟</span>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_3.png" alt="">
          <h3>舒缓静心的纯音好碟 - 留声机第6期</h3>
          <span>MV</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="home_music ">
    <div class="title">
      <h2>新歌首发</h2>
      <a href="#">查看更多<img src="./images/home/more_icon.png" alt=""></a>
    </div>
    <ul>
      <li>
        <a href="">
          <img src="./images/home/menu_1.png" alt="">
          <h3>五月天玛莎制作</h3>
          <h4>家家</h4>
          <span>独家</span>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_2.png" alt="">
          <h3>不一样的经典翻唱</h3>
          <h4>厉害了！我的歌</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_3.png" alt="">
          <h3>Sex With Me(Dance Remixes)</h3>
          <h4>Rihanna</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_4.png" alt="">
          <h3>爱又爱</h3>
          <h4>by2</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_5.png" alt="">
          <h3>时光总有音乐陪着我</h3>
          <h4>BTY</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_6.png" alt="">
          <h3>情迷大提琴，涌动心弦的深沉</h3>
          <h4>彼得大帝</h4>
        </a>
      </li>

    </ul>
  </div>
  <div class="home_music margin">
    <div class="title">
      <h2>小编推荐精选集</h2>
      <a href="#">查看更多<img src="./images/home/more_icon.png" alt=""></a>
    </div>
    <ul>
      <li>
        <a href="">
          <img src="./images/home/menu_1.png" alt="">
          <h3>20首奥斯卡金曲</h3>
          <h4>侧耳倾听你的心</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_2.png" alt="">
          <h3>五彩斑纳的电子摇滚</h3>
          <h4>荒诞的喜剧</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_3.png" alt="">
          <h3>心里有点潮湿</h3>
          <h4>子不语</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_4.png" alt="">
          <h3>2016第58届格莱美获奖和提名名单</h3>
          <h4>音乐跳电台</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_5.png" alt="">
          <h3>孩子睡吧！</h3>
          <h4>icekeigo</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_6.png" alt="">
          <h3>【梦幻流行】最难过的是看到你和傻小白的...</h3>
          <h4>传奇【崇尚幽默】</h4>
        </a>
      </li>
    </ul>
  </div>
  <div class="banner">
    <img src="./images/home/banner1.png" alt="">
  </div>
  <div class="home_music">
    <div class="title">
      <h2>手机唱片店</h2>
      <a href="#">查看更多<img src="./images/home/more_icon.png" alt=""></a>
    </div>
    <ul>
      <li>
        <a href="">
          <img src="./images/home/menu_1.png" alt="">
          <h3>无法长大</h3>
          <h4><img src="./images/home/micon.png" alt=""> 家家</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_2.png" alt="">
          <h3>Don～t Say No</h3>
          <h4>徐玄</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_3.png" alt="">
          <h3>Sex With Me(Dance Remixes)</h3>
          <h4>Rihanna</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_4.png" alt="">
          <h3>For Life-Winter Specl Album,...</h3>
          <h4>EXO</h4>
          <span>独家</span>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_5.png" alt="">
          <h3>00:00</h3>
          <h4><img src="./images/home/micon.png" alt="">郁可唯</h4>
          <span>独家</span>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/menu_6.png" alt="">
          <h3>有时THE GREAT YOG A 有时</h3>
          <h4>林宥嘉</h4>
          <span>独家</span>
        </a>
      </li>
    </ul>
  </div>
  <div class="mv_banner">
    <div class="title">
      <h2>MV</h2>
    </div>
    <div class="big_banner">
      <a href="">
        <img src="./images/home/MV_pic.png" alt="">
        <h3>MV-线（《因为遇见你》剧情版</h3>
        <h4>刘惜君带你进入《因为遇见你》，体味“遇见”的美好。</h4>
        <span><img src="./images/home/MV_play.png" alt=""></span>
      </a>
    </div>
  </div>
  <div class="fanart">
    <div class="fanart_title">
      <div class="title">
        <h2>原创音乐推荐</h2>
        <a href="#">查看更多<img src="./images/home/more_icon.png" alt=""></a>
      </div>
    </div>
    <ul class="music_list">
      <li>
        <div class="list">
          <div class="left">
            <a href="">
              <img src="./images/home/list1.png" alt="">
              <span>
                <h2>天空之城</h2>
                <h3>
                  <p>SQ</p>Doughboy;侧田
                </h3>
              </span>
            </a>
          </div>
          <div class="right">
            <p>MV</p>
            <a href="">
              <span></span>
              <span></span>
              <span></span>
            </a>
          </div>
        </div>
      </li>
      <li>
        <div class="list">
          <div class="left">
            <a href="">
              <img src="./images/home/list2.png" alt="">
              <span>
                <h2>戏台</h2>
                <h3>
                  <p>SQ</p>陈粒
                </h3>
              </span>
            </a>
          </div>
          <div class="right">
            <a href="">
              <span></span>
              <span></span>
              <span></span>
            </a>
          </div>
        </div>
      </li>
      <li>
        <div class="list">
          <div class="left">
            <a href="">
              <img src="./images/home/list3.png" alt="">
              <span>
                <h2>恋曲2016</h2>
                <h3>
                  <p>SQ</p>
                  <p>蜜糖先生乐队</p>
                </h3>
              </span>
            </a>
          </div>
          <div class="right">
            <a href="">
              <span></span>
              <span></span>
              <span></span>
            </a>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="home_music">
    <div class="title">
      <h2>VIP会员曲库</h2>
      <a href="#">查看更多<img src="./images/home/more_icon.png" alt=""></a>
    </div>
    <ul>
      <li>
        <a href="">
          <img src="./images/home/vip_pic1.png" alt="">
          <h3>自传</h3>
          <h4>五月天</h4>
          <span>独家</span>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/vip_pic2.png" alt="">
          <h3>今日营业中</h3>
          <h4>林宥嘉</h4>
          <span>独家</span>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/vip_pic3.png" alt="">
          <h3>准备中</h3>
          <h4>陈奕迅</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/vip_pic4.png" alt="">
          <h3>What Makes You Beautiful</h3>
          <h4>one Direction</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/vip_pic5.png" alt="">
          <h3>A Moon Shaped Pool</h3>
          <h4>Radiohead</h4>
        </a>
      </li>
      <li>
        <a href="">
          <img src="./images/home/vip_pic6.png" alt="">
          <h3>25</h3>
          <h4>Adele</h4>
        </a>
      </li>
    </ul>
  </div>
  <footer>
    <div class="container">
      <div class="left">
        <a href="">
          <img src="./images/home/footer_pic.png" alt="">
          <span>
            <h2>Tomorrow</h2>
            <h3>Avril Lavigne</h3>
          </span>
        </a>
      </div>
      <div class="right">
        <a href=""><img src="./images/home/footer_icon1.png" alt=""></a>
        <a href=""><img src="./images/home/footer_icon2.png" alt=""></a>
      </div>

    </div>
    <div class="bar">
      <span></span>
      <span></span>
    </div>
  </footer>
</body>
<script src="./js/less.min.js" type="text/javascript"></script>

</html>